<template>
  <div class="app-container">
    <div class="app-title">查询条件</div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label> 用户Id/姓名/手机号: </label>
        <el-input v-model="searchForm.idOrNameOrMobile" />
      </div>
      <div class="searchItem">
        <label> 认证进度: </label>
        <el-select v-model="searchForm.state" placeholder="全部">
          <el-option label="入驻申请" value="1" />
          <el-option label="媒体账号(审核)" value="2" />
          <el-option label="媒体账号(通过)" value="3" />
          <el-option label="媒体账号(拒绝)" value="4" />
          <el-option label="已签约" value="5" />
          <el-option label="通过" value="6" />
          <el-option label="冻结/拉黑" value="7" />
        </el-select>
      </div>
      <div class="searchItem">
        <label> 媒体平台: </label>
        <el-select v-model="searchForm.platefromType" placeholder="全部">
          <el-option label="抖音" value="1" />
          <el-option label="快手" value="2" />
          <el-option label="小红书" value="3" />
          <el-option label="其他" value="0" />
        </el-select>
      </div>
      <div class="searchItem">
        <label> 入驻时间: </label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="入驻时间"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="datetimerange"
        />
      </div>
      <div class="searchItem">
        <label> 团队人数: </label>
        <el-select
          v-model="searchForm.teamOrder"
          placeholder="全部"
          style="width: 80px"
        >
          <el-option value="ASC" label="升序" />
          <el-option value="DESC" label="降序" />
        </el-select>
      </div>
      <div class="searchItem">
        <el-button
          v-hasPermission="['cityPartner:search']"
          class="searchItembtn"
          type="primary"
          @click="search"
        >
          查询
        </el-button>
        <el-button type="success" class="searchItembtn" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
    </div>
    <div class="app-title">品牌合伙人列表</div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="用户ID"
        prop="username"
        :show-overflow-tooltip="true"
        align="center"
        min-width="120px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="手机号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="真实姓名"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="团队人数(人)"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.directFansNum + scope.row.indirectFansNum || 0
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="认证进度"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{
            [
              "",
              "入驻申请",
              "媒体账号(审核)",
              "媒体账号(通过)",
              "媒体账号(拒绝)",
              "已签约",
              "通过",
              "冻结/拉黑",
            ][scope.row.state]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="入驻时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.enterTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="媒体平台"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template v-if=" scope.row.platefromTypes" slot-scope="scope">
          <span v-for="item in scope.row.platefromTypes.split(',')" :key="item">
            {{ ['其他','抖音','快手','小红书'] [item] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link
            v-hasPermission="['cityPartner:view']"
            class="el-icon-view"
            @click="view(row)"
          >
            查看详情
          </el-link>

          <el-link v-has-no-permission="['cityPartner:view']" class="no-perm">
            {{ $t("tips.noPermission") }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'CityPartner',
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      tableKey: 1,
      loading: false,
      list: [
        {
          id: 125,
          mobile: '15507507557',
          source: 1,
          roleType: 0,
          isDel: null,
          createTime: '2021-06-28 14:04:34',
          state: 2,
          skillExamineState: 4,
          operateExamineState: 2,
          operateExamineTime: null,
          realName: '李主快',
          idCardNo: '440582199501122917',
          registerCityId: null,
          registerCity: '山东省滨州市',
          mobileLocation: '广东省深圳市',
          inviterName: '13008800250',
          inviterMobile: '13008800250',
          directFansNum: null,
          indirectFansNum: null,
          enterApplyState: 4,
          enterTime: '2021-07-13 18:38:27',
          serviceRange: null,
          provinceId: 1,
          cityId: 727
        }
      ],
      searchForm: {
        idOrNameOrMobile: '',
        state: '',
        teamOrder: '',
        platefromType: '',
        startTime: '',
        endTime: ''

      },
      dateTime: ''
    }
  },
  watch: {
  },
  created() {
    this.search()
  },
  methods: {
    search(e) {
      if (e && e.page) {
        this.pagination.pageNum = e.page
        this.pagination.pageSize = e.limit
      }
      // 开始查询
      if (this.dateTime) {
        this.searchForm.startTime = this.dateTime[0]
        this.searchForm.endTime = this.dateTime[1]
      } else {
        this.searchForm.startTime = ''
        this.searchForm.endTime = ''
      }
      this.loading = true
      this.$get('/web/partnerBrand/list', { ...this.pagination, ...this.searchForm }).then(res => {
        this.loading = false
        if (res.data.code === '0') {
          this.list = res.data.data.rows
          this.total = res.data.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    reset() {
      this.dateTime = ''
      this.searchForm = {}
      this.search()
    },
    view(row) {
      this.$router.push({
        name: 'brandPartnerDetail',
        query: {
          id: row.userId,
          invite: row.indirectFansNum ? row.indirectFansNum : 0 + row.directFansNum ? row.directFansNum : 0
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
